<template>
  <div>
    <el-checkbox-group
      v-model="checkedCities"
      @change="handleCheckedCitiesChange"
      class="mar_bottom_5"
    >
      <div
        v-for="(city, c) in list"
        :key="c"
        style="display: inline-block; margin: 0 5px"
      >
        <template v-if="city.is_show">
          <el-input
            v-model="city.title"
            size="small"
            style="width: 120px"
          ></el-input>
          <i
            class="el-icon-s-order"
            style="margin: 0 10px 0 5px; font-size: 18px; color: #409eff"
            @click="updateSkuItem('list', c)"
          ></i>
          <i
            class="el-icon-close"
            style="margin: 0 10px 0 0; font-size: 18px"
            @click="setSKuShow('list', c, 0)"
          ></i>
        </template>
        <template v-else>
          <el-checkbox :label="city.id">{{ city.title }}</el-checkbox>
          <i
            style="margin: 0 10px 0 5px; font-size: 14px"
            class="el-icon-edit-outline"
            @click="setSKuShow('list', c, 1)"
          ></i
        ></template>
      </div>
    </el-checkbox-group>

    <el-col :span="24" class="mar_bottom_15">
      <el-input
        v-model="title"
        placeholder="请输入三级栏目名称"
        style="width: 200px"
        size="small"
      ></el-input>
      <el-button
        :loading="$store.state.isLoading"
        type="primary"
        size="small"
        style="margin-left: 10px"
        @click="addMenu"
      >
        添加
      </el-button>
    </el-col>
  </div>
</template>


<script>
export default {
  props: {
    list: {
      type: [Array, Object],
      default: () => {},
    },
    index: {
      type: Number,
      default: -1,
    },
    showlist: [Array, Object],
    item: [Array, Object],
  },
  data() {
    return {
      checkedCities: [],
      title: "",
    };
  },
  created() {},
  watch: {
    showlist(val) {
      this.checkedCities = val;
    },
  },
  methods: {
    updateSkuItem(item, str) {
      var params = {};
      params = JSON.parse(JSON.stringify(this[item][str]));
      delete params.z;
      this.$api.getShops.updateSku(params).then((res) => {
        if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
          this.$emit("updateSku");
        } else {
          this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
        }
      });
    },
    setSKuShow(item, str, flag) {
      this.$set(this[item][str], "is_show", flag == 1 ? true : false);
      if (flag == 0) {
        this.$emit("updateSku");
      }
    },
    addMenu() {
      if (this.title) {
        var params = {};
        params.title = this.title;
        params.parent_id = this.item.id;
        this.$api.getShops.addSku(params).then((res) => {
          if (res.data.code == 200 && res.data.status == 1 && res.data.result) {
            this.title = "";
            this.$emit("updateSku");
          } else {
            this.$fnc.alertError(res.data.code_desc, res.data.result); //失败弹出框
          }
        });
      }
    },
    handleCheckedCitiesChange() {
      this.$emit("setTotal", this.checkedCities, this.index);
    },
  },
};
</script>
